<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
        </div>
      </Back>
    </div>
    <el-scrollbar style="height: 100%;">
      <div class="form-content">
        <el-divider content-position="left">退款信息</el-divider>
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                退款单号
              </div>
            </template>
            {{ info.refund_sn }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                订单号
              </div>
            </template>
            {{ info.order_sn }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                退款状态
              </div>
            </template>
            {{ info.state_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                申请时间
              </div>
            </template>
            {{ info.create_time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                退款时间
              </div>
            </template>
            {{ info.refund_time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                申请金额
              </div>
            </template>
            {{ info.apply_amount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                实退金额
              </div>
            </template>
            {{ info.refund_amount }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                退款类型
              </div>
            </template>
            {{ info.type_name }}
          </el-descriptions-item>

         
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                审核人
              </div>
            </template>
            {{ info.examine_id }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                审核时间
              </div>
            </template>
            {{ info.examine_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                退款理由
              </div>
            </template>
            {{ info.reason }}
          </el-descriptions-item>

        </el-descriptions>
        <el-divider content-position="left">会员信息</el-divider>
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                会员ID
              </div>
            </template>
            {{ info.user_id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                会员手机号
              </div>
            </template>
            {{ info.user_phone }}
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider content-position="left">商品信息</el-divider>
        <el-table :data="info.goods" border style="width:100%">
          <el-table-column label="图片" prop="name" align="center">
            <template #default="goods">
              <img :src="$imgUrl + goods.row.image" style="width: 50px; height: 50px" alt="">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" align="center" />
          <el-table-column label="单价" prop="price" align="center" />
          <el-table-column label="数量" prop="count" align="center" />
          <el-table-column label="属性" prop="mdl" align="center" />
          <el-table-column label="总价" prop="total_original_price" align="center" />
        </el-table>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup name="OrderRefundDetail">
const { proxy } = getCurrentInstance()

const info = reactive({});

onMounted(() => {
  // 编辑
  let refund_sn = proxy.$route.query.refund_sn || null;
  if (refund_sn) {
    getDetail(refund_sn)
  }
});


async function getDetail(refund_sn) {
  let res = await proxy.$post('OrderRefundDetail', {
    refund_sn: refund_sn
  }, false)
  if (res.code === 0) {
    Object.assign(info, res.data);
  }
}

</script>
<style scoped lang="scss"></style>
<style lang="scss" scoped>
.form-content {
  padding: 0 20px;
}
</style>
